<template>
  <p class="time-down">
    <!--<span>活动开始时间：{{startTime}}</span>-->
    <span v-if="!msg">距离结束还剩：{{time}}</span>
    <span v-if="msg">{{msg}}</span>
  </p>
</template>

<script>
export default {
  name: 'timedown',
  data () {
    return {
      timer: null,
      time: '00:00:00',
      startTime: '',
      msg: '',
      status: 0
    }
  },
  created () {
    this.startTime = new Date()
    this.getTime()
  },
  methods: {
    getTime: function () {
      this.$http.get('/server/index/gameTime')
        .then(function (res) {
          this.startTime = res.data.data.start_time
          let remainTime = res.data.data.game_time * 60
          if (remainTime === 0) {
            this.msg = '活动已结束'
          } else {
            this.time = this.transformTime(remainTime)
            this.timer = setInterval(() => {
              if (remainTime > 0) {
                remainTime = remainTime - 1
                this.time = this.transformTime(remainTime)
              } else {
                clearInterval(this.timer)
              }
            }, 1000)
          }
        })
    },
    transformTime: function (time) {
      let hour = Math.floor(time / (60 * 60))
      let mint = Math.floor(time % 3600 / 60)
      let second = time % 60 % 60
      return this.dobNum(hour) + ':' + this.dobNum(mint) + ':' + this.dobNum(second)
    },
    dobNum: function (number) {
      if (number < 10) {
        return '0' + number
      }
      return number
    }
  }
}
</script>

<style scoped >
  .time-down{
    line-height: 35px;
    font-size: 14px;
    color: #ffff00;
    text-align: right;
  }
  .time-down>span{
    background: #094800;
  }
</style>
